{% extends 'algos/algos.html' %}

{% block body_parameters %} ex:ondataload="onDataLoad" {% endblock %} 

{% block preJQuery %}
<link rel='stylesheet' href='/media/top_button.css' type='text/css' />
<link type="text/css" href="/media/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<link rel="exhibit/data" type="application/jsonp" href="https://spreadsheets.google.com/feeds/list/0AnEtH40HxJqMdGxVRHBtU2h5Yng3YUw2ZkFzazZONkE/od6/public/basic?alt=json-in-script" ex:converter="googleSpreadsheets" />
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>
{% endblock %}

{% block postJQuery %}
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.jscrollpane.min.js"></script>
{% endblock %}

{% block scriptJS %}

<script type="text/javascript">	
function refresh() {
	$("p[className='text']").addClass("text");
};

function onDataLoad() {
	window.exhibit = Exhibit.create();
    window.exhibit.configureFromDOM();
	
	var _historyListener = {
        //onBeforePerform:       - function(action) { alert('beforePerform') },
        onAfterPerform: function(action) { refresh() },
    };
	window.simile = SimileAjax;
    window.simile.History.addListener(_historyListener); 
	refresh();	
}
</script>

<style type="text/css">
.algos .exhibit-thumbnailView-itemContainer-IE {
	overflow: visible !important;
	float: left !important;
	width: 100% !important;
}
</style>
{% endblock %}

{% block content_base %}
<div class="container_24 algos">
    <div class="grid_16">
        <div style="display:none;" ex:role="view" ex:showToolbox="false" ex:viewClass="Thumbnail" ex:showHeader="false">
            <div ex:role="lens">
                <p class="text" ex:content=".paragraph"></p>
            </div>
        </div>
    </div>
	<div class="clear"></div>
</div>
{% endblock %}